<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg"></p>
      <p class="right">
        可预约总量
        <span style="color: #29fcff">99999</span>
        人
      </p>
    </div>
    <div class="number">
      <span v-for="(item, index) in 5" :key="index">{{ item }}</span>
    </div>
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts">123</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

import * as echarts from "echarts";
import "echarts-liquidfill";

let charts = ref();
console.log(charts, "charts");

onMounted(() => {
  initChart();
});

const initChart = () => {
  let mycharts = echarts.init(charts.value);
  let angle = 0; //角度，用来做简单的动画效果的
  let value = 0.35;
  let data = [value, value];
  let option = {
    series: [
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);

          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 2,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);

          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);
          
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);

          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
              startAngle: ((90 + -angle) * Math.PI) / 180,
              endAngle: ((220 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);

          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
          let point = getCirlPoint(x0, y0, r, 90 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "#0CD3DB",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5", //绿点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params: any, api: any) {
          console.log(params);

          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7;
          let point = getCirlPoint(x0, y0, r, 270 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "#0CD3DB",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "水球图",
        type: "liquidFill",
        outline: {
          show: false,
        },
        radius: "60%",
        data: data,
        color: [value < 0.3 ? "#71da74" : value < 0.9 ? "#b04e33" : "#f83a07"],
        backgroundStyle: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [
            // 由中心向四周渐变
            {
              offset: 1,
              color: "rgba(42, 72, 132, 0)",
            },
            {
              offset: 0,
              color: "rgba(93, 124, 168, 1)",
            },
          ]),
        },
        label: {
          formatter: function (params: any) {
            if (params.value < 0.3) {
              return "{a|" + "安全" + "}";
            } else if (params.value >= 0.3 && params.value < 0.9) {
              return "{b|" + "25%" + "}";
            } else if (params.value >= 0.9 && params.value <= 1) {
              return "{c|" + "危险" + "}";
            }
          },
          rich: {
            a: {
              color: "#14d986",
              fontSize: 30,
            },
            b: {
              color: "#ba750d",
              fontSize: 30,
            },
            c: {
              color: "#ff4848",
              fontSize: 30,
            },
          },
        },
      },
    ],
  };

  function draw() {
    angle = angle + 3;
    mycharts.setOption(option, true);
  }
  setInterval(function () {
    draw();
  }, 100);
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0: any, y0: any, r: any, angle: any) {
  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  return {
    x: x1,
    y: y1,
  };
}
</script>

<style lang="scss" scoped>
.box {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .top {
    margin-left: 20px;

    .title {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
    .right {
      float: right;
      color: white;
      font-size: 20px;
      span {
        color: yellowgreen;
      }
    }
  }
  .number {
    padding: 10px;
    margin-top: 30px;
    display: flex;

    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #29fcff;
    }
  }
  .charts {
    width: 100%;
    height: 270px;
  }
}
</style>